<template>
  <view class="login-container">
    <!-- 有机背景形状 -->
    <view class="organic-background">
      <view class="organic-shape-1"></view>
      <view class="organic-shape-2"></view>
    </view>
    
    <view class="login-content">
      <!-- Logo -->
      <view class="logo">
        <image src="/static/login/logo.png" class="logo-img" mode="widthFix" />
      </view>

      <!-- 登录表单 -->
      <view class="form-container">
        <view class="form">
          <!-- 用户类型 -->
          <view class="form-field">
            <text class="form-label">You are :</text>
            <picker mode="selector" :range="userTypes" @change="handleUserTypeChange">
              <view class="select">
                <text class="select-text">{{ userTypes[selectedUserType] }}</text>
                <image class="chev-icon" src="/static/down.png" mode="aspectFit" />
              </view>
            </picker>
          </view>

          <!-- 邮箱 -->
          <view class="form-field">
            <text class="form-label">Email</text>
            <view class="input-container">
              <input
                type="text"
                placeholder="contact@greenwear.com"
                class="form-input"
                v-model="email"
              />
              <view class="clear-btn" v-if="email" @click="clearEmail">
                <text class="clear-icon">×</text>
              </view>
            </view>
          </view>

          <!-- 密码 -->
          <view class="form-field">
            <text class="form-label">Password</text>
            <view class="input-container">
              <input
                type="password"
                placeholder="••••••••••••••••••"
                class="form-input"
                v-model="password"
              />
              <view class="clear-btn" v-if="password" @click="clearPassword">
                <text class="clear-icon">×</text>
              </view>
            </view>
          </view>

          <!-- 登录按钮 -->
          <button class="submit-button" @click="handleSubmit">Sign In</button>

          <!-- 忘记密码 -->
          <view class="forgot-password">
            <text class="forgot-text" @click="handleForgotPassword">Forgot password?</text>
          </view>
        </view>
      </view>

      <!-- 环保图标 -->
      <view class="environmental-icons">
        <!-- 回收图标 -->
        <image src="/static/login/1.png" class="environmental-icon" />
        <!-- 叶子图标 -->
        <image src="/static/login/2.png" class="environmental-icon" />
        <!-- 闪电图标 -->
        <image src="/static/login/3.png" class="environmental-icon" />
        <!-- 水滴图标 -->
        <image src="/static/login/4.png" class="environmental-icon" />
        <!-- 卡车图标 -->
        <image src="/static/login/5.png" class="environmental-icon" />
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { useUserStore } from '@/store/user.js'

const userTypes = ref([
  'Factory company',
  'Brand company',
  'Customer',
])
const selectedUserType = ref(0) // 用户类型
const email = ref('')
const password = ref('')

const handleUserTypeChange = (e) => {
  selectedUserType.value = e.detail.value
}
const handleSubmit = () => {
  uni.showToast({
    title: 'Logging in...',
    icon: 'loading'
  })
  
  // 保存用户类型到 Pinia（持久化）
  try {
    const userStore = useUserStore()
    const chosen = userTypes.value[selectedUserType.value]
    if (chosen) userStore.setUserType(chosen)
  } catch (e) {}

  // 模拟登录成功，2秒后跳转到首页/品牌页
  setTimeout(() => {
    uni.hideToast()
    
    const userStore = useUserStore()
    const isBrand = /brand/i.test(userStore.userType || '')
    const target = isBrand ? '/pages/brand/brand' : '/pages/person/person'
    // 自定义 tabbar 模式下，使用 reLaunch 跳转
    uni.reLaunch({ url: target })
  }, 1000)
  
  // console.log('登录尝试:', { 
  //   userType: userTypes.value[selectedUserType.value], 
  //   email: email.value, 
  //   password: password.value 
  // })
}

const handleForgotPassword = () => {
  uni.showToast({
    title: 'Need Backend',
    icon: 'none'
  })
}

const clearEmail = () => {
  email.value = ''
}

const clearPassword = () => {
  password.value = ''
}
</script>

<style lang="scss">
/* 基础样式 */
* {
  box-sizing: border-box;
}

.login-container {
  --climata-sky-light: #e0f2fe;
  --climata-sky: #87ceeb;
  --climata-cyan: #00e5ff;
  --climata-green: #4ade80;
  --climata-green-dark: #16a34a;
  --climata-lime: #84cc16;
  
  --text-primary: #374151;
  --text-secondary: #6b7280;
  --white: #ffffff;
  --input-bg: #ffffff;
  --border-color: #e5e7eb;
  
  --gradient-sky: linear-gradient(180deg, #ADD8E6, #DDF0E0, #F0FFF0);
  --gradient-organic: linear-gradient(135deg, #00e5ff, #4ade80, #84cc16);
  --gradient-form: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
  
  --shadow-form: 0 10px 30px -10px rgba(55, 65, 81, 0.1);
  --shadow-button: 0 8px 25px -5px rgba(55, 65, 81, 0.3);
  
  background: var(--gradient-sky);
}

/* 登录容器 */
.login-container {
  height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: var(--gradient-sky);
  overflow: hidden;
  box-sizing: border-box;
}
.login-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.login-content {
  width: 100%;
  max-width: 28rem;
  position: relative;
  z-index: 10;
}

/* 有机背景形状 */
.organic-background {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.organic-shape-1 {
  position: absolute;
  top: -5rem;
  right: -5rem;
  width: 24rem;
  height: 24rem;
  background: none;
  border-radius: 50%;
  opacity: 0.8;
  filter: blur(1px);
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
  transform: rotate(-15deg) scale(1.2);
}

.organic-shape-2 {
  position: absolute;
  top: 2.5rem;
  left: 2.5rem;
  width: 20rem;
  height: 20rem;
  background: none;
  border-radius: 50%;
  opacity: 0.6;
  filter: blur(1px);
  clip-path: ellipse(60% 40% at 30% 30%);
  transform: rotate(25deg);
}

/* Logo */
.logo {
  text-align: center;
  /* margin-bottom: 1.5rem; */
}

.logo-img { width: 624rpx; }

/* 表单容器 */
.form-container {
  /* background: var(--gradient-form); */
  backdrop-filter: blur(10px);
  /* border: 1px solid rgba(255, 255, 255, 0.2); */
  border-radius: 1.5rem;
  padding: 1.5rem;
  /* box-shadow: var(--shadow-form); */
}

.form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* 表单字段 */
.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-label {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-primary);
}

/* 输入框容器 */
.input-container {
  position: relative;
  display: flex;
  align-items: center;
}

.form-input, .form-select {
  height: 2.8rem;
  padding: 0 0.8rem;
  border: 1px solid var(--border-color);
  border-radius: 0.75rem;
  background-color: var(--input-bg);
  font-size: 1rem;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.2s ease;
  width: 100%;
  padding-right: 2.5rem;
}

.form-input:focus, .form-select:focus {
  border-color: var(--climata-green);
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.1);
}

.form-input::placeholder {
  color: var(--text-secondary);
}

.form-select {
  cursor: pointer;
}

/* 清空按钮 */
.clear-btn {
  position: absolute;
  right: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ccc;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.2s ease;
  z-index: 10;
}

.clear-btn:hover {
  background-color: #999;
}

.clear-icon {
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  line-height: 1;
}
.select { height: 2.8rem; display: flex; align-items: center; justify-content: space-between; padding: 0 0.8rem; border: 1px solid var(--border-color); border-radius: 0.75rem; background: #fff; }
.select-text { color: var(--text-primary); font-size: 1rem; }
.chev-icon { width: 32rpx; height: 32rpx; opacity: .8; }

/* 提交按钮 */
.submit-button {
  width: 100%;
  height: 2.8rem;
  background-color: var(--text-primary);
  color: var(--white);
  border: none;
  border-radius: 0.75rem;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-button);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: normal;
}

.submit-button:hover {
  background-color: #1f2937;
  transform: translateY(-1px);
}

.submit-button:active {
  transform: translateY(0);
}

/* 忘记密码链接 */
.forgot-password { text-align: left; }
.forgot-text { color: var(--text-primary); font-size: 1rem; font-weight: 500; text-decoration: underline; cursor: pointer; transition: color 0.2s ease; }

.forgot-text:hover {
  color: var(--climata-green-dark);
}

/* 环保图标 */
.environmental-icons {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0;
  flex-wrap: nowrap;
}

.environmental-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  /* background-color: var(--climata-green-dark); */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.environmental-icon:hover {
  transform: scale(1.05);
}

/* 响应式设计 */
@media (max-width: 640px) {
  .login-container {
    padding: 1rem;
  }
  
  .logo-text {
    font-size: 3rem;
  }
  
  .form-container {
    padding: 1.5rem;
  }
  
  .organic-shape-1 {
    width: 16rem;
    height: 16rem;
  }
  
  .organic-shape-2 {
    width: 12rem;
    height: 12rem;
  }
  
  .environmental-icons {
    gap: 0.5rem;
    margin-top: 0;
  }
  
  .environmental-icon {
    width: 80rpx;
    height: 80rpx;
  }
}

@media (max-width: 480px) {
  .environmental-icons {
    flex-wrap: wrap;
    justify-content: center;
  }
}
</style>